@import './main.less';
body{
    position:relative;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
}
.app {
    height: 100vh;
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    >.map {
        
        height: 100vh;
        overflow: hidden;
        .head {
            display: none;
            overflow: hidden;
            position: absolute;
            .tapList {
                z-index: 99;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                overflow-y: hidden;
                overflow-x: scroll;
                // .remH(98);
                .flexCenter; // padding:0 50%;
                // padding-bottom: @r*10rem;
                >div {
                    min-width: @r*180rem;
                    font-size: @r*30rem;
                    display: inline-block;
                    color: rgba(255, 255, 255, 0.4);
                    white-space: nowrap;
                    position: relative;
                    
                    >div:first-child{
                        padding-right: @r*60rem;
                        padding-top: @r*28rem;
                        background-color: #1a9bff;
                        // .remH(98);
                    }
                    >div:last-child{
                        // .remH(98);
                        display: flex;
                        >span{
                            background-color: #1a9bff;
                            .remH(30);
                            &:first-child{
                                flex: 1;
                            }
                            &:nth-child(2){
                                background-color: transparent;
                                // border: @r*15rem solid #1a9bff;
                            }
                            &:last-child{
                                .remW(105);
                            }
                        }
                    }
                    &:first-child {
                        >div:first-child{
                            padding-left: @r*315rem;
                        }
                        min-width: @r*495rem;
                        // text-indent: -2em;
                    }
                    &:last-child {
                        min-width: @r*420rem;
                        >div:first-child{
                            padding-right: @r*330rem;
                        }
                        >div:last-child{
                            >span:last-child{
                                .remW(360);
                            }
                        }
                    }
                    &:nth-child(2){
                        min-width: @r*150rem;
                        >div:last-child{
                            >span:last-child{
                                .remW(90);
                            }
                        }
                    }
                    &:nth-child(5){
                        min-width: @r*120rem;
                        >div:last-child{
                            >span:last-child{
                                .remW(75);
                            }
                        }
                    }
                    &.active {
                        color: #ffffff;
                        >div:last-child{
                            >span:nth-child(2){
                                .remH(0);
                                border: @r*15rem solid #1a9bff;
                                border-bottom-color: transparent;
                            }
                        }
                    }
                }
            }
        }
        #mapContent {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            // visibility: hidden;
            // .anchorBL:not(.BMap_noprint) {
            .anchorBL{
                // display: none !important;
                z-index: -9999999 !important;
            }
            span.BMap_Marker {
                //百度地图marker
                img[src $="myPosition.png"]{
                    height: 100%;
                }
                &.attractionsMap {
                    width: @r*68rem !important;
                    height: @r*81.6rem !important;
                    background: url('../image/AttractionsBox.png') 0 0 no-repeat;
                    background-size: 100% 100%;
                    margin-left: -@r*4rem;
                    margin-top: -@r*4rem;
                    >div.AName {
                        position: absolute;
                        top: 105%;
                        left: -150%;
                        right: -150%;
                        text-align: center;
                        >span {
                            display: inline-block;
                            padding: @r*2rem @r*10rem;
                            line-height: @r*28rem;
                            white-space: nowrap;
                            font-size: @r*24rem;
                            background-color: #ffffff;
                            border-radius: @r*8rem;
                        }
                    }
                    >div:first-child {
                        border-radius: 50%;
                        overflow: hidden;
                        display: inline-block;
                        width: @r*60rem !important;
                        height: @r*60rem !important;
                        left: @r*4rem;
                        top: @r*4rem;
                        &:before {
                            background: url('../image/headset.png') 0 0 no-repeat;
                            background-size: 100% 100%;
                            .remH(40);
                            .remW(40);
                            content: '';
                            position: absolute;
                            left: @r*10rem;
                            top: @r*10rem;
                        }
                        img {
                            height: 100%;
                        }
                    }
                }
                &.mapWC {
                    >div {
                        border-radius: 50%;
                        overflow: hidden;
                        display: inline-block;
                        width: @r*60rem !important;
                        height: @r*60rem !important;
                        img {
                            height: 100%;
                        }
                    }
                }
                &.myPosition,&.BMap_noprint {
                    z-index: -99 !important;
                    >div {
                        // border-radius: 50%;
                        overflow: hidden;
                        display: inline-block;
                        width: @r*38rem !important;
                        height: @r*47rem !important;
                        img {
                            height: 100%;
                        }
                    }
                }
                &.goA {
                    z-index: -99 !important;
                    >div {
                        // border-radius: 50%;
                        overflow: hidden;
                        display: inline-block;
                        width: @r*96rem !important;
                        height: @r*96rem !important;
                        img {
                            height: 100%;
                        }
                    }
                }
            }
        }
        .mapComponent {
            position: relative;
            .gpsWitch {
                position: fixed;
                top: @r*138rem;
                right: @r*40rem;
                .remH(80);
                .remW(80);
                &.open{
                    background-image: url('../image/GPS-1.png');
                }
                &.open1{
                    background-image: url('../image/GPS-2.png');
                }
                &.open2{
                    background-image: url('../image/GPS-3.png');
                }
                &.open2n{
                    background-image: url('../image/GPS-3n.png');
                }
                background-image: url('../image/GPS-1n.png');
                background-position: 0 0;
                background-repeat: no-repeat;
                background-size: 100%;
                z-index: 98;
            }
            .gpsBox {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                z-index: 99;
                background-color: rgba(100, 100, 100, 0.2);
                .gpsSet {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    background-color: #ffffff;
                    border-radius: @r*8rem;
                    .remH(400);
                    .remW(600);
                    padding: 0 @r*40rem;
                    .setHead {
                        .remH(100);
                        .flexCenter;
                        >div {
                            flex: 1;
                            color: #515151;
                            font-size: @r*32rem;
                        }
                        .close {
                            font-size: @r*46rem;
                            color: rgb(153, 153, 153);
                        }
                    }
                    .setBox {
                        >div {
                            .remH(130);
                            .flexCenter;
                            color: #515151;
                            font-size: @r*28rem;
                            background-color: #f0f0f0;
                            padding: 0 @r*30rem;
                            >div:first-child {
                                .remH(80);
                                .remW(80);
                                background-image: url('../image/GPS-0s.png');
                                &.signal2{
                                    background-image: url('../image/GPS-0w.png');
                                }
                                &.signal3{
                                    background-image: url('../image/GPS-0n.png');
                                }
                                background-position: 0 0;
                                background-repeat: no-repeat;
                                background-size: 100%;
                                margin-right: @r*12rem;
                            }
                        }
                        div.gpsSite {
                            border-bottom: 1px solid #cccccc;
                            border-top-left-radius: @r*8rem;
                            border-top-right-radius: @r*8rem;
                            .position {
                                margin-left: @r*10rem;
                                color: rgb(153, 153, 153);
                            }
                        }
                        div.autoNav {
                            border-bottom-left-radius: @r*8rem;
                            border-bottom-right-radius: @r*8rem;
                            >div:first-child {
                                background-image: url('../image/AUTOGPS.png');
                            }
                            .txt {
                                flex: 1;
                            }
                        }
                        .checkboxC,
                        .checkboxO {
                            .remH(48);
                            .remW(88);
                        }
                        .checkboxC {
                            .icon-checkboxC;
                        }
                        .checkboxO {
                            .icon-checkboxO;
                        }
                    }
                }
            }
        }
        .footer {
            .sitePosition {
                position: fixed;
                bottom: @r*20rem;
                left: 0;
                right: 0;
                z-index: 9;
                padding: 0 @r*10rem;
                .flex{
                    .remH(98);
                    .flexCenter;
                    .position {
                        background-color: #ffffff;
                        .remH(98);
                        .remW(98);
                        text-align: center;
                        padding-top: @r*25rem;
                        img {
                            .remH(48);
                            .remW(48);
                        }
                    }
                    .siteInfo {
                        flex: 1;
                        background-color: #ffffff;
                        margin-left: @r*10rem;
                        .remH(98);
                        >div {
                            .flexCenter;
                            .remH(98);
                            padding: 0 @r*20rem;
                            >div {
                                &.play,
                                &.open {
                                    font-size: 0;
                                    >img {
                                        .remH(40);
                                        .remW(40);
                                    }
                                }
                                &.ScenicName {
                                    flex: 1;
                                    margin-left: @r*20rem;
                                    font-size: @r*32rem;
                                    color: #515151;
                                }
                                &.distance {
                                    margin: 0 @r*20rem;
                                }
                            }
                        }
                    }
                }
            }
            >.sitePositionDrink,>.sitePositionAffiliated,>.sitePositionTicket {
                display: none;
                position: fixed;
                bottom: @r*20rem;
                left: 0;
                right: 0;
                z-index: 9;
                padding: 0 @r*10rem;
                .flex{
                    .remH(98);
                    .flexCenter;
                    .position {
                        background-color: #ffffff;
                        .remH(98);
                        .remW(98);
                        text-align: center;
                        padding-top: @r*25rem;
                        img {
                            .remH(40);
                            .remW(40);
                        }
                    }
                    .siteInfo {
                        flex: 1;
                        background-color: #ffffff;
                        margin-left: @r*10rem;
                        .remH(98);
                        >div {
                            .flexCenter;
                            .remH(98);
                            padding: 0 @r*20rem;
                            >div {
                                &.open {
                                    font-size: 0;
                                    >img {
                                        .remH(40);
                                        .remW(40);
                                    }
                                }
                                &.name {
                                    flex: 1;
                                    margin-left: @r*20rem;
                                    font-size: @r*32rem;
                                    color: #515151;
                                    text-align: center;
                                }
                            }
                        }
                    }
                }
            }
            .WCNavInfo {
                display: none;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 97;
                background-color: #ffffff;
                .remH(120);
                overflow: hidden;
                >div {
                    .remH(120);
                    padding: 0 @r*40rem;
                    .flexCenter;
                    .name {
                        flex: 1;
                        font-size: @r*32rem;
                    }
                    .nav {
                        .navPosition {
                            .remW(32);
                            .remH(32);
                            .icon-navPosition2;
                            vertical-align: text-bottom;
                        }
                        color: #1a9afd;
                        font-size: @r*28rem;
                    }
                }
            }
            .AttractionsInfo {
                display: none;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 98;
                background-color: rgba(255, 255, 255, 0.8);
                .remH(370);
                .explain {
                    position: absolute;
                    right: @r*40rem;
                    top: -@r*54rem;
                    .remW(120);
                    .remH(120);
                    border-radius: 50%;
                    background-color: #2ea5ff;
                    text-align: center;
                    background-image: url('../image/explain.png');
                    background-position: 0 bottom;
                    background-repeat: no-repeat;
                    background-size: 100%;
                    &.play {
                        background-image: url('../image/explainPlay.png');
                    }
                    &.pause {
                        background-image: url('../image/explainPause.png');
                    }
                }
                .info {
                    padding: 0 @r*40rem;
                    border-top: @r*1rem solid #cccccc;
                    .flexCenter;
                    .remH(281);
                    .img {
                        .remH(224);
                        .remW(224);
                        overflow: hidden;
                        img {
                            height: 100%;
                        }
                    }
                    .text {
                        .remH(224);
                        padding-top: @r*7rem;
                        padding-left: @r*30rem;
                        flex: 1;
                        .name {
                            font-size: @r*32rem;
                            line-height: @r*80rem;
                            font-weight: bold;
                            color: #515151;
                        }
                        .introduction {
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            word-break: break-all;
                            font-size: @r*26rem;
                            color: rgb(102, 102, 102);
                            line-height: @r*44rem;
                            .remH(88);
                            overflow: hidden;
                        }
                        .site {
                            padding-top: @r*12rem;
                            .icon-site {
                                .remW(30);
                                .remH(40);
                                .icon-site2;
                                vertical-align: text-bottom;
                            }
                            .siteKm{
                                color: rgb(102, 102, 102);
                            }
                        }
                    }
                }
                .nav {
                    color: #1a9afd;
                    text-align: center;
                    border-top: @r*1rem solid #cccccc;
                    .remH(89);
                    .flexCenter;
                    span {
                        flex: 1;
                    }
                    .navPosition {
                        .remW(32);
                        .remH(32);
                        .icon-navPosition2;
                        vertical-align: text-bottom;
                    }
                }
            }
            .ExitNavigation{
                display: none;
                position: absolute;
                bottom: @r*134rem;
                right: @r*40rem;
                .remH(68);
                .remW(196);
                background: url('../image/ExitNavigation.png') 0 0 no-repeat;
                background-size: 100% 100%;
            }
        }
    }

    >.activationWrap{
        display: none;
        position: fixed;
        z-index: 999;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.4);
        .activationBox{
            background-color: #ffffff;
            border-radius: @r*10rem;
            .remW(600);
            .remH(720);
            padding: @r*30rem @r*40rem;
            position: absolute;
            top: 0;left: 0;right: 0;bottom: 0;
            margin: auto;
            .exit{
                // display: none;
                position: absolute;
                right: 0;
                top: 0;
                .close{
                    display: inline-block;
                    .remW(50);
                    .remH(50);
                    text-align: center;
                    line-height: @r*50rem;
                    font-size: @r*46rem;
                }
            }
            .head{
                .remH(92);
                line-height: @r*92rem;
                font-size: @r*32rem;
                text-align: center;
                font-weight: bold;
                margin-bottom: @r*20rem;
            }
            .flex{
                margin-bottom: @r*30rem;
                .flexCenter;
                >div:first-child{
                    .remW(120);
                    text-align: right;
                    padding-right: @r*20rem;
                }
                >div:last-child{
                    border: 1px solid #cccccc;
                    background-color: #fafafa;
                    border-radius: @r*10rem;
                    flex: 1;
                    padding: 0 @r*10rem;
                    overflow: hidden;
                    >input{
                        width: 100%;
                        padding: 0;
                        .remH(62);
                        outline: none;
                        border: none;
                        box-shadow: none;
                        background-color: transparent;
                    }
                }
            }
            .buyBox{
                display: none;
                .visibilityhidden{
                    .remH(80);
                    margin-top: @r*80rem;
                    visibility:hidden;
                    margin-bottom: @r*30rem;
                }
                .code{
                    >div:last-child{

                        padding:0;
                        border: none;
                        background-color: transparent;
                        .flex{
                            margin: 0;
                            >div{
                                border: 1px solid #cccccc;
                                background-color: #fafafa;
                                border-radius: @r*10rem;
                                flex: 1;
                                input{
                                    width: 100%;
                                    padding: 0;
                                    .remH(62);
                                    outline: none;
                                    border: none;
                                    box-shadow: none;
                                    background-color: transparent;
                                }
                                &:first-child{
                                    padding-left: @r*10rem;
                                    padding-right: 0;
                                }
                                &:last-child{
                                    &.disabled{
                                        color: #cccccc;
                                    }
                                    .remH(66);
                                    color: #1a9bff;
                                    line-height: @r*66rem;
                                    margin-left: @r*10rem;
                                    font-size: @r*24rem;
                                    text-align: center;
                                }
                            }
                        }
                    }
                }
            }
            // .activBox{
                // display: none;
            // }
            .button{
                .remH(80);
                background-color: #e0e0e0;
                border-radius: @r*10rem;
                overflow: hidden;
                text-align: center;
                margin-top: @r*80rem;
                margin-bottom: @r*30rem;
                line-height: @r*80rem;
                font-size: @r*30rem;
                color:#999999;
                &.ok{
                    background-color: #1a9bff;
                    color:#ffffff;
                }
            }
            .buy,.confirmBuy{
                // visibility: hidden;
                .remH(80);
                margin-bottom: @r*30rem;
                background-color: #1a9bff;
                color:#ffffff;
                border-radius: @r*10rem;
                overflow: hidden;
                text-align: center;
                line-height: @r*80rem;
                font-size: @r*30rem;
            }
            .text{
                text-align: center;
                span{
                    color: #1a9bff;
                }
            }
        }
    }
    >.AttractionsInfo {
        display: none;
        position: fixed;
        z-index: 999;
        background-color: #ffffff;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        overflow-y: scroll;
        overflow-x: hidden;
        .img {
            .remH(320);
            overflow: hidden;
            position: relative;
            background-color: #000000;
            img {
                width: 100%;
            }
            .linkMap {
                position: absolute;
                left: @r*24rem;
                bottom: @r*20rem;
                background-color: #1a9bff;
                border-radius: @r*28rem;
                .remH(56);
                .remW(184);
                padding-left: @r*16rem;
                font-size: @r*24rem;
                color: #ffffff;
                .flexCenter;
                .icon-map {
                    margin-right: @r*10rem;
                    .icon-map;
                    .remH(39);
                    .remW(35);
                }
            }
        }
        .audioPack {
            .autoControlStrip {
                padding-top: @r*38rem;
                padding-left: @r*30rem;
                padding: @r*38rem @r*20rem @r*20rem @r*30rem;
                .flexCenter;
                .play {
                    .remW(56);
                    .remH(56);
                    margin-right: @r*30rem;
                    i {
                        width: 100%;
                        height: 100%;
                    }
                    i.icon-pause {
                        .icon-pause;
                    }
                    i.icon-play1 {
                        .icon-play1;
                    }
                }
                .strip {
                    flex: 1;
                    overflow: hidden;
                    padding: 0 @r*16rem;
                    .stripBox {
                        position: relative;
                        .remH(16);
                        padding-top: @r*7rem;
                        .s-hr {
                            .remH(2);
                            background-color: #cccccc;
                        }
                        .s-ac-hr {
                            .remH(2);
                            background-color: #57abf1;
                            position: absolute;
                            width: 0%;
                            top: @r*7rem;
                            left: 0;
                            z-index: 1000;
                            transition: left 100ms linear;
                            -moz-transition: left 100ms linear;	/* Firefox 4 */
                            -webkit-transition: left 100ms linear;	/* Safari 和 Chrome */
                            -o-transition: left 100ms linear;
                        }
                        .s-position {
                            .remW(16);
                            .remH(16);
                            position: absolute;
                            left: 0%;
                            top: 0;
                            background-color: #57abf1;
                            border-radius: 50%;
                            transition: left 100ms linear;
                            -moz-transition: left 100ms linear;	/* Firefox 4 */
                            -webkit-transition: left 100ms linear;	/* Safari 和 Chrome */
                            -o-transition: left 100ms linear;
                        }
                    }
                }
                .tiem {
                    margin-left: @r*30rem;
                    font-size: @r*20rem;
                    color: #666666;
                }
            }
        }
        .autoControlbuttom {
            .flexCenter;
            >div:first-child,
            >div:last-child {
                flex: 1;
            }
            .before {
                margin-right: @r*40rem;
                i.icon-before {
                    .icon-before;
                }
                i.icon-beforeNo {
                    .icon-beforeNo;
                }
            }
            .after {
                margin-left: @r*40rem;
                i.icon-after {
                    .icon-after;
                }
                i.icon-afterNo {
                    .icon-afterNo;
                }
            }
            .before,
            .after {
                width: 33rem;
                height: 50rem;
                .remW(33);
                .remH(50);
                i {
                    .remW(33);
                    .remH(50);
                }
            }
            .entry {
                border: @r*4rem solid #57abf1;
                border-radius: 50%;
                .remH(88);
                .remW(88);
                line-height: @r*88rem;
                text-align: center;
                color: #666666;
                font-size: @r*24rem;
            }
        }
        .introduction {
            padding: @r*40rem @r*24rem;
            .iTitle {
                font-size: @r*32rem;
                color: #333333;
            }
            .txt {
                margin-top: @r*60rem;
                color: #333333;
                font-size: @r*26rem;
            }
        }
    }
    >.AttractionsList {
        display: none;
        overflow: hidden;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 299;
        max-height: 70vh;
        .remH(684);
        >div {
            padding: 0 @r*40rem;
            background-color: rgba(255, 255, 255, 0.9);
            height: 100%;
            border-top: @r*4rem solid #f4a628;
            .flexColumn;
            .title {
                .remH(80);
                line-height: @r*80rem;
                text-align: center;
                position: relative;
                .icon-listClose {
                    position: absolute;
                    right: @r*0rem;
                    top: @r*20rem;
                    .icon-listClose;
                    .remW(40);
                    .remH(40);
                }
            }
            .search {
                .remH(58);
                input {
                    .remH(58);
                    width: 100%;
                    border: 1px solid #cccccc;
                    background-color: #f0f0f0;
                    box-shadow: none;
                    text-indent: 1em;
                    outline: none;
                    border-radius: @r*8rem;
                }
            }
            .list {
                flex: 1;
                overflow-y: auto;
                overflow-x: hidden;
                font-size: @r*28rem;
                margin: 0 -@r*40rem;
                padding: 0 @r*40rem @r*40rem;
                -webkit-overflow-scrolling: touch;
                .item {
                    &:not(:last-child) {
                        border-bottom: 1px solid #dddddb;
                    }
                    .flexCenter;
                    .remH(81);
                    .name {
                        flex: 1;
                    }
                }
            }
        }
    }
    >.DrinkList,>.AffiliatedList,>.TicketList {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 299;
        max-height: 70vh;
        .remH(684);
        >div {
            padding: 0 @r*40rem;
            background-color: rgba(255, 255, 255, 0.9);
            .remH(684);
            border-top: @r*4rem solid #f4a628;
            .flexColumn;
            .title {
                .remH(80);
                .flexCenter;
                font-size: @r*26rem;
                .flex1{
                    flex: 1;
                }
                >span{
                    margin-right: @r*60rem;
                    .flexCenter;
                    height: @r*40rem;
                    >i{
                        margin-right:@r*18rem; 
                        .remW(32);
                        .remH(32);
                    }

                }
                .icon-checkBoxC2{
                    .icon-checkBoxC2;                    
                }
                .icon-checkBoxO2{
                    .icon-checkBoxO2;
                }
                .icon-listClose {
                    .icon-listClose;
                    .remW(40);
                    .remH(40);
                }
            }
            .search {
                .remH(58);
                input {
                    .remH(58);
                    width: 100%;
                    border: 1px solid #cccccc;
                    background-color: #f0f0f0;
                    box-shadow: none;
                    text-indent: 1em;
                    outline: none;
                    border-radius: @r*8rem;
                }
            }
            .list {
                flex: 1;
                overflow-y: auto;
                overflow-x: hidden;
                font-size: @r*28rem;
                margin: 0 -@r*40rem;
                padding: 0 @r*40rem @r*40rem;
                -webkit-overflow-scrolling: touch;
                .item {
                    border-top: 1px solid #dddddb;
                    .flexCenter;
                    .remH(81);
                    i{
                        .remW(34);  
                        .remH(34);
                        margin-right:@r*30rem;
                        &.icon-MerchantC{
                            .icon-MerchantC;
                        }
                        &.icon-DrinkingC{
                            .icon-DrinkingC;
                        }
                        &.icon-carParkC{
                            .icon-carParkC;
                        }
                        &.icon-exitsC{
                            .icon-exitsC;
                        }
                        &.icon-trafficC{
                            .icon-trafficC;
                        }
                        &.icon-TicketC{
                            .icon-TicketC;
                        }
                    }
                    .name {
                        flex: 1;
                    }
                }
            }
        }
    }
    .tips{
        display: none;
        position: fixed;
        top: @r*10rem;
        left: 0;
        right: 0;
        text-align: center;
        z-index: 999;
        // transition: top 100ms linear;
        // -moz-transition: top 100ms linear;	/* Firefox 4 */
        // -webkit-transition: top 100ms linear;	/* Safari 和 Chrome */
        // -o-transition: top 100ms linear;
        span{
            display: inline-block;
            line-height: @r*40rem;
            padding: @r*10rem @r*20rem;
            background-color: #d2eafb;
            border-radius: @r*10rem;
        }
    }
}

audio {
    display: none;
}